<template>
  <div v-show="show">
    <div class="table_item">
      <p class="title">采购商分析</p>

      <el-table
        :data="tableData"
        style="width: 100%;margin-top: 10px">
        <el-table-column
          v-for="(item, index) in headerArr"
          :key="index"
          :label="item">
          <template slot-scope="scope">
            <div>
                <span v-if="item">
                  {{scope.row[index]}}
                </span>
              <div v-else>
                <el-tooltip class="item" effect="dark" content="查看月报表" placement="top">
                    <span>
                      <i class="icon-xiangqing" style="color: #2A97F9;cursor: pointer" @click="toDetail(scope.row[index])"></i>
                    </span>
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top: 10px"
        align="right"
        v-if="pageCount > 0"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="data.currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="data.pageSize"
        layout="prev, pager, next, sizes"
        :page-count="pageCount">
      </el-pagination>

    </div>
  </div>
</template>

<script>
    import {getData} from '@/api/automation/customs'
    export default {
        name: "buyer",
        props:['info'],
        data() {
            return {
                tableData:[],
                headerArr:[], // 头部列表
                pageCount:0,
                data:{
                    "basename":"",
                    "reportColumns": "[month],hs_code,Shipper_name,Consignee_name,country,CUSTOMS,MODE_OF_TRANSPORT",
                    "chartpms": "3",
                    "where":"",
                    "pageSize": 5,
                    "cols":"",
                    "col":"",
                    "types": "consignee",
                    "chartInt": "10",
                    "crowInt": "5",
                    "currentPage":1,
                    "t":3
                },
                show:false
            }
        },
        methods:{
            init() {
                this.data.basename = this.info.c;
                this.data.where = this.info.w;
                this.data.cols = this.info.cls;
                this.data.col = this.info.cl;

                getData(this.data).then(res => {
                    this.$emit('update')
                    if(res.data.data.list) {
                        this.show = true
                        this.tableData = res.data.data.list
                        this.headerArr = res.data.data.title
                        this.pageCount = res.data.data.pageCount
                    }
                })
            },
            handleSizeChange(size) {
                this.data.pageSize = size
                this.data.currentPage = 1
                this.refresh()
            },
            handleCurrentChange(page) {
                this.data.currentPage = page

                this.refresh()
            },
            toDetail(value) {
                value = value.split(',')
                var obj = {
                    value:value[0],
                    lb:value[1]
                }
                let routeUrl = this.$router.resolve({
                    path: "/customs/table/detail",
                    query:{
                        info:JSON.stringify(Object.assign(this.info,obj))
                    }
                });
                window.open(routeUrl .href, '_blank');
            },
            refresh() {
                getData(this.data).then(res => {
                    this.tableData = res.data.data.list
                    this.headerArr = res.data.data.title
                    this.pageCount = res.data.data.pageCount
                })
            }
        }
    }
</script>

<style scoped>
.title{
  color: #2A97F9;
  font-size: 15px;
  font-weight: 600;
}
.table_item{
  padding: 21px 35px;
  box-sizing: border-box;
  background-color: white;
  border-radius: 20px;
  margin-bottom: 20px;
}
</style>
